<template>
  <div class="layerMap_typhoon">
    <div>
      <h3>
        <div class="exampleMap typhoonMap">
          <Map ref="map" />
        </div>
      </h3>
      <h3>
        <Button type="primary" @click="addLayer('typhoonLayer')">添加台风路径</Button>
        <Button type="primary" @click="removeLayer('typhoonLayer')">删除台风路径</Button>
      </h3>

      <code class="code">
        <!-- script -->
        <div>
          <div class="code-tag">
            <<span>script</span>>
          </div>

          <!-- import 和 export default -->
          <div>
            <div class="code-indent2">
              <span class="code-orange">import</span>
              { Maps, Utils }
              <span class="code-orange">from</span>
              <span class="code-green">'src/base/Gykj_map'</span>
            </div>
            <div class="code-emptyLine"></div>
            <div class="code-indent2">
              <span class="code-orange">export default</span>
              {
            </div>
          </div>

          <!-- data -->
          <div>
            <div class="code-indent4">
              data () {
            </div>
            <div class="code-indent6">
              <span class="code-purpleRed">return</span> {
            </div>
            <div class="code-indent8">
              layers: {}
            </div>
            <div class="code-indent6">}</div>

            <div class="code-indent4">},</div>
          </div>

          <!-- methods -->
          <div>
            <div class="code-indent4">
              methods: {
            </div>

            <div class="code-indent6 comment">
              // 添加台风路径
            </div>
            <div class="code-indent6">
              <span class="code-purpleRed">async</span>
              addTyphoonLayer () {
            </div>
            <div class="code-indent8">
              <span class="code-default">const</span>
              res =
              <span class="code-purpleRed">await</span>
              <span class="code-green">Maps</span>['typhoonLayer']({
            </div>
            <div class="code-indent10">layerOptions: {</div>
            <div class="code-indent12">
              Map: <span class="code-orange">this</span>.Map,
              <span class="comment">// 必传，你的地图实例</span>
            </div>
            <div class="code-indent12">
              Layers: <span class="code-orange">this</span>.layers,
              <span class="comment">// 必传，你的存放所有地图图层的变量</span>
            </div>
            <div class="code-indent12">
              Dom: <span class="code-orange">this</span>.$refs['wrapper'],
              <span class="comment">// 必传，存放所有台风路径信息的Dom，需要你传入真正的dom</span>
            </div>
            <div class="code-indent12">
              isCustom: true,
              <span class="comment">// 选传，设置为自定义数据图层，为true时，必须传入apiUrl或者data</span>
            </div>
            <div class="code-indent12">
              apiUrl: '',
              <span class="comment">// 选传，可传入api源路径，需注意，传入api源是不能配置请求参数的</span>
            </div>
            <div class="code-indent12">
              data: [],
              <span class="comment">// 选传，可直接传入数据，传入的数据字段必须和默认api源数据字段吻合</span>
            </div>
            <div class="code-indent12">
              typhoonTitleClass: 'typhoonTitleClass',
              <span class="comment">
                // 选传，可通过添加typhoonTitleClass，可改变台风大标题的样式
              </span>
            </div>
            <div class="code-indent12">
              typhoonControlClass: 'typhoonControlClass',
              <span class="comment">
                // 选传，可通过添加typhoonControlClass，改变台风列表显示开关的样式
              </span>
            </div>
            <div class="code-indent12">
              typhoonInfoClass: 'typhoonInfoClass'
              <span class="comment">
                // 选传，可通过添加typhoonInfoClass，改变台风列表的样式
              </span>
            </div>
            <div class="code-indent10">}</div>

            <div class="code-indent8">})</div>

            <div class="code-emptyLine"></div>

            <div class="code-indent8">
              if (res.code === <span class="code-green">Utils</span>.ERR_OK) {
            </div>
            <div class="code-indent10">
              <span class="code-orange">this</span>.$set(<span class="code-orange">this</span>.layers, 'typhoonLayer', res)
            </div>
            <div class="code-indent10">
              <span class="code-orange">this</span>.$set(<span class="code-orange">this</span>.layers, 'typhoonList', {})
            </div>

            <div class="code-indent8">} else {</div>

            <div class="code-indent10 comment">
              // 获取该图层失败，自己做错误提醒
            </div>
            <div class="code-indent10 comment">
              // 错误原因，大部分为接口出错
            </div>

            <div class="code-indent8">}</div>

            <div class="code-indent6">
              },
            </div>

            <div class="code-indent6 comment">
              // 删除台风路径
            </div>
            <div class="code-indent6">
              removeTyphoonLayer () {
            </div>

            <div class="code-indent8">
              <span class="code-purpleRed">for</span>
              (<span class="code-default">let</span>
              key in <span class="code-orange">this</span>.layers['typhoonList']) {
            </div>
            <div class="code-indent10 comment">
              // 清掉台风路径动画的定时器
            </div>
            <div class="code-indent10">
              <span class="code-purpleRed">clearInterval</span>(<span class="code-orange">this</span>.layers['typhoonList'][key].interval)
            </div>
            <div class="code-indent10">
              <span class="code-orange">this</span>.Map.removeLayer(<span class="code-orange">this</span>.layers['typhoonList'][key]['layer'])
            </div>
            <div class="code-indent10">
              <span class="code-orange">this</span>.Map.removeLayer(<span class="code-orange">this</span>.layers['typhoonList'][key]['typhoon']['typhoonStrong'])
            </div>
            <div class="code-indent8">}</div>

            <div class="code-emptyLine"></div>

            <div class="code-indent8">
              <span class="code-orange">this</span>.$delete(<span class="code-orange">this</span>.layers, 'typhoonLayer')
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.$delete(<span class="code-orange">this</span>.layers, 'typhoonList')
            </div>

            <div class="code-indent6">}</div>

            <div class="code-indent4">}</div>
          </div>

          <!-- export default 的 } -->
          <div class="code-indent2">}</div>

          <!-- /script -->
          <div class="code-tag">
            </<span>script</span>>
          </div>
        </div>

      </code>
    </div>
  </div>
</template>

<script>
import { Components } from 'base/Gykj_map'

export default {
  components: {
    Map: Components.initMap
  },
  mounted () {
    setTimeout(() => {
      this.layers = this.$refs['map'].getLayers()
    }, 20)
  },
  data () {
    return {
      layers: {}
    }
  },
  methods: {
    addLayer (layerName) {
      this.$refs['map'].addLayer({ layerName })
    },
    removeLayer (layerName) {
      this.$refs['map'].removeLayer({ layerName })
    }
  }
}
</script>

<style lang="scss" scoped>
  .layerMap_typhoon {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
  }
</style>
